@mixin time-border-utils($long, $width) {
  @each $d in top, right, bottom, left {
    @each $y in top, right, bottom, left {
      .time-border-#{$d}-#{$y} {
        box-sizing: content-box;
        border: solid $width $color1;
        position: absolute;
        #{$d}: $width1;
        #{$y}: $width1;
        @if $d == top {
          width: $long;
        }  @else if $d == bottom {
          width: $long;
        } @else if $d == left {
          height: $long;
        } @else if $d == right {
          height: $long;
        }
      }
    }
  }
}

@mixin border-gradient-utils() {
  @each $d in top, right, bottom, left {
    .border-gradient-#{$d} {
      position: absolute;
      @if $d == top {
        width: 100%;
        height: $width1;
        top: 0;
        background: linear-gradient(to right, rgba(107,216,234,0) 0%, rgba(107,216,234,0.4) 50%, rgba(107,216,234,0) 100%);
      }  @else if $d == bottom {
        width: 100%;
        height: $width1;
        bottom: 0;
        background: linear-gradient(to right, rgba(107,216,234,0) 0%, rgba(107,216,234,0.4) 50%, rgba(107,216,234,0) 100%);
      } @else if $d == left {
        height: 100%;
        width: $width1;
        left: 0;
        top: 0;
        background: linear-gradient(to bottom, rgba(107,216,234,0) 0%,  rgba(107,216,234,0.4) 14px, rgba(107,216,234,0) 80%, rgba(107,216,234,0) 100%);
      }
    }
  }
}